<template>
  <xn-dialog
    :title="title"
    custom-class="img-cropper-dialog"
    :visible.sync="selfVisible"
    @close="onDialogHide"
    top="5vh">
    <el-scrollbar style="height: 100%">
      <div class="details-content" :style="{ height: this.cropHeight + 'px', minHeight: '540px' }">
        <vue-cropper
          ref="cropper"
          :img="imgUrl"
          :auto-crop="autoCrop"
          :fixed-box="fixedBox"
          :info-true="infoTrue"
          :high="false"
          :fixed="fixed"
          :fixed-number="fixedNumber"
          :can-move-box="false"
          :output-size="outputSize"
          :output-type="outputType"
          :auto-crop-width="cropWidth"
          :auto-crop-height="cropHeight"
          :enlarge="enlarge"></vue-cropper>
      </div>
    </el-scrollbar>

    <div class="footer" slot="footer">
      <div class="tips">
        <span>提示：</span>
        <span>请填充满裁剪框！</span>
        <span class="danger">裁剪框内空白区域会自动填充为透明色！</span>
      </div>
      <el-button type="default" @click="selfVisible = false">取消</el-button>
      <el-button type="primary" @click="onCropperOk">确定</el-button>
    </div>
  </xn-dialog>
</template>

<script>
import VueCropper from '../libs/vueCropper/index.vue'
import XnDialog from './xnDialog.vue'
export default {
  props: {
    visible: {
      type: Boolean,
    },
    imgUrl: {
      type: String,
    },
    autoCrop: {
      type: Boolean,
      default: true,
    },
    cropWidth: {
      type: Number,
      default: 600,
    },
    cropHeight: {
      type: Number,
      default: 450,
    },
    title: {
      type: String,
      default: '图片裁剪',
    },
    outputType: {
      type: String,
      default: 'png',
    },
    fixedBox: {
      type: Boolean,
      default: true,
    },
    infoTrue: {
      type: Boolean,
      default: true,
    },
    enlarge: {
      type: Number,
      default: 1,
    },
    fixed: {
      type: Boolean,
      default: false,
    },
    fixedNumber: {
      type: Array,
      default: () => [1, 1],
    },
  },
  components: {
    VueCropper,
    XnDialog,
  },
  data() {
    return {
      selfVisible: false,
      outputSize: 1,
    }
  },
  computed: {},
  watch: {
    visible(newValue) {
      this.selfVisible = newValue
    },
  },
  mounted() {},
  methods: {
    onDialogHide() {
      this.$emit('update:visible', false)
      this.$emit('closed')
      console.log('onDialogHide...')
    },
    onCropperOk() {
      this.$refs.cropper.getCropBlob(data => {
        this.$emit('img-cropped', data)
        this.selfVisible = false
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.img-cropper-dialog {
  ::v-deep &.el-dialog {
    flex-direction: column;
    position: relative;
    height: 95%;
    max-height: 720px;
    width: 90%;
    max-width: 1100px;
    .details-content {
      // position: absolute;
      // top: 50px;
      // right: 0;
      // bottom: 5px;
      // left: 0;
      padding: 0 10px;
      height: 100%;
      // padding: 0 40px;
      // overflow: auto;
    }
    .footer {
      text-align: right;
      .tips {
        float: left;
        color: #666;
        font-size: 14px;
        // margin-left: 40px;
        .warning {
          color: #e6a23c;
        }
        .danger {
          color: #f56c6c;
        }
      }
    }
  }
}
</style>
